<template>
  <div class="container">
    <div class="close"><span class="iconfont iconicon-test"></span></div>
    <div class="logo"><span class="iconfont iconnew"></span></div>
    <div class="inputs">
      <hminput placeholder='用户名 / 手机号码'
               v-model='user.username'
               :rules='/^1\d{10}$|^1\d{4}$/'
               msg='手机号输入不合法'></hminput>
      <hminput v-model="user.password"
               placeholder='密码'></hminput>
      <hminput v-model="user.nickname"
               placeholder='昵称'></hminput>
    </div>
    <p class="tips">
      已有账号？
      <a href="#/login"
         class="">去登陆</a>
    </p>
    <hmbotton type='primary'
              @click="register">
      <span>注册</span>
    </hmbotton>
  </div>
</template>

<script>
// 引入组件
import hmbotton from '@/components/hmbutton.vue'
import hminput from '@/components/hminput.vue'

import { userRegister } from '@/apis/user.js'
export default {
  // 注册引入的组件
  components: {
    hmbotton, hminput
  },
  data () {
    return {
      user: {
        username: '',
        password: '',
        nickname: ''
      }
    }
  },
  methods: {
    async register () {
      let res = await userRegister(this.user)
      if (res.data.message == '注册成功') {
        this.$toast.success(res.data.message)
        // 路由跳转
        this.$router.push({ name: 'login' })
      } else {
        this.$toast.success('注册失败，请重试')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>